<!DOCTYPE html>
<html>
<head>
 	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="../css/weui.css">
    <link rel="stylesheet" type="text/css" href="../css/newding.css">
    <link rel="stylesheet" type="text/css" href="../css/xq_slide.css">
    <title>众享商城</title>
</head>
<body class="bgf6">
	<!-- 头部 -->
    <div class="header-container bgfff">
            <div class="weui-cell ih30 box">
                <div class="weui-cell__hd">
                </div>
                <div class="weui-cell__bd colon textovh textcenter">
                	商品名称
                	商品名称
                	商品名称
                	商品名称
                	商品名称
                	商品名称
                	商品名称
                	商品名称
                	<!-- <span class="fr tc">退出</span> -->
                </div>
                <!--<div class="weui-cell__ft">
                    <img src="/Public/Wechat/img/fenx.png" class="iconfenx"/>
                </div>-->
            </div>
    </div>
    <!-- 内容 -->
    <div class="xq_container">
    	<div style="width: 100%;height: 10rem;margin: 0 auto;max-width: 100%;">
				<div class="xq_slide_out">
					<ul class="xq_slide_in">	

					</ul>
				</div>
		</div>
		<div id="test"></div>
		<div class="pad10 bgfff">
			<div class="line2 ih20 mgb5">哪里欧莱雅哪里欧莱雅哪里欧莱雅哪里欧莱雅哪里欧莱雅哪哪里欧莱雅哪里欧莱雅哪哪里欧莱雅哪里欧莱雅哪里欧莱雅莱雅哪里欧莱雅哪里欧莱雅</div>
			<div class="flex shopinfonamebox">
				<div class="flex1">
					<div class="ih30">
						<span class="colred">￥105.0</span>
						<span class="fs12">运费￥<span>12.0</span></span>
					</div>
					<div class="ih30 colfff fs0-8">
						<span class="yhspan">月售<span class="colfff">588</span>件</span>
					</div>
				</div>
				<div class="scbut">
					<div class="fs0"><img class="right" src="../img/img (151).png"></div>
					<div class="colred ih20 scbuttext fs0-8">+收藏</div>
				</div>
			</div>
			<div class="shoplqbox flex flexcenter">
					<span class="mgr10">领券</span>
					<div class="flex1 textovh">
						<div class="lqdiv"><span class="lqdivtop">折</span><span class="lqdivmain">满199享9折</span></div>
						<div class="lqdiv"><span class="lqdivtop">折</span><span class="lqdivmain">满199享9折</span></div>
						<div class="lqdiv"><span class="lqdivtop">折</span><span class="lqdivmain">满199享9折</span></div>
					</div>
					<div class="lqshowmore">
						<img class="w100" src="../img/img (27).png">
					</div>
			</div>
		</div>
		<div class="ggbox mgtop20 bgfff flex">
			<span class="mgr10">规格</span>
			<div class="flex1 textovh colb6">
				<span>已选</span>
				<span>#13</span>
				<span>双文娱</span>
				<span>#13</span>
				<span>双文娱</span>
				<span>#13</span>
				<span>双文娱</span>
			</div>
			<div  class="ggshowmore">
				<img class="w100" src="../img/img (27).png">
			</div>
		</div>	
		<div class="shopinfopjbox flex flexcenter">
			<div>
				<img  class="mgr5" src="../img/img (49).png">
			</div>
			<span>评价</span>
		</div>
		<div class="bgfff">
			<div class="pjtop">
				<a class="weui-cell weui-cell_access" href="javascript:;">
			        <div class="weui-cell__bd">
			            <p><img class="w20 y3" src="../img/img (54).png">用户评价(<span>28</span>)</p>
			        </div>
			        <div class="weui-cell__ft">
			        	<span class="colb6">查看全部</span>
			        </div>
    			</a>
			</div>
			<div class="pjmain">
				<div class="pjbox flex">
					<div class="pjheadimg">
						<img src="../img/img (127).png">
					</div>
					<div class="flex1">
						<div class="textovh">兰博的海</div>
						<div class="startbox">
							<div class="startboxtop">
								<img class="w15" src="../img/img (104).png">
								<img class="w15" src="../img/img (104).png">
								<img class="w15" src="../img/img (104).png">
								<img class="w15" src="../img/img (105).png">
								<img class="w15" src="../img/img (105).png">
							</div>
							<div class="right colb6 startboxtime">2017-12-15</div>
						</div>
						<div class="pjtext">
							黄江浩阿萨德骷髅精灵啊圣诞节快乐安咯是大陆上课看到啦开始了卡拉啥来看待拉拉是空的拉上课了；精灵啊圣诞节快乐安咯是大陆上课看到啦开始了卡拉啥来看待拉拉是空的拉上课了；精灵啊圣诞节快乐安咯是大陆上课看到啦开始了卡拉啥来看待拉拉是空的拉上课了；
						</div>
						<div class="pjimgbox">
							<div>
								<img class="w100" src="../img/img (160).png">
							</div>
							<div>
								<img class="w100" src="../img/img (160).png">
							</div>
							<div>
								<img class="w100" src="../img/img (160).png">
							</div>
						</div>
					</div>
				</div>
				<div class="pjbox flex">
					<div class="pjheadimg">
						<img src="../img/img (127).png">
					</div>
					<div class="flex1">
						<div class="textovh">兰博的海</div>
						<div class="startbox">
							<div class="startboxtop">
								<img class="w15" src="../img/img (104).png">
								<img class="w15" src="../img/img (104).png">
								<img class="w15" src="../img/img (104).png">
								<img class="w15" src="../img/img (105).png">
								<img class="w15" src="../img/img (105).png">
							</div>
							<div class="right colb6 startboxtime">2017-12-15</div>
						</div>
						<div class="pjtext">
							黄江浩阿萨德骷髅精灵啊圣诞节快乐安咯是大陆上课看到啦开始了卡拉啥来看待拉拉是空的拉上课了；精灵啊圣诞节快乐安咯是大陆上课看到啦开始了卡拉啥来看待拉拉是空的拉上课了；精灵啊圣诞节快乐安咯是大陆上课看到啦开始了卡拉啥来看待拉拉是空的拉上课了；
						</div>
						<div class="pjimgbox">
							<div>
								<img class="w100" src="../img/img (160).png">
							</div>
							<div>
								<img class="w100" src="../img/img (160).png">
							</div>
							<div>
								<img class="w100" src="../img/img (160).png">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="scbox mgtop20 pad10 bgfff">
			<div class="flex scboxtop h50">
				<div class="mgr10 scboxtopimg h50">
					<img class="h100" src="../img/img (4).png">
				</div>
				<div class="flex1">
					<div class="scboxtopname ih25">众享商城</div>
					<div class="scboxtopstart ih25">
						<img class="w15" src="../img/img (104).png">
						<img class="w15" src="../img/img (104).png">
						<img class="w15" src="../img/img (104).png">
						<img class="w15" src="../img/img (104).png">
						<img class="w15" src="../img/img (104).png">
					</div>
				</div>
			</div>
			<div class="flex scboxmid mgtop10">
				<div class="flex1">
					<div>1.3万</div>
					<div>收藏人数</div>
				</div>
				<div class="flex1">
					<div>133</div>
					<div>全部商品</div>
				</div>
				<div class="flex1">
					<div class="colon">9.5</div>
					<div class="colon">综合评分</div>
				</div>
			</div>
			<div class="scboxfoot mgtop10 flex">
				<a class="flex1 colblack flex flexcenter" href="/">
						<img class="w15 mgr5" src="../img/img (42).png">
						联系商家
				</a>
				<a class="flex1 colon flex flexcenter" href="/">
						<img class="w15 mgr5" src="../img/img (7).png">
						进店逛逛
				</a>
			</div>
		</div>
		<div class="shopinfopjbox flex flexcenter">
			<div>
				<img  class="mgr5" src="../img/img (87).png">
			</div>
			<span>详情</span>
		</div>
		<div class="shopimginfobox">
			<img src="../img/img (86).png">
			<img src="../img/img (86).png">
		</div>

		<!-- 商品规格详情 -->
		<div id="actionSheet_wrap" style="display: none;">
		    <div class="weui-mask_transparent actionsheet__mask bg0-6"  style="opacity: 1" id="mask"></div>
		    <div class="weui-actionsheet weui-actionsheet_toggle" id="weui-actionsheet">
		        <div class="weui-actionsheet__menu myweuigg">
		        	<div class="myweuiggtop flex">
		        		<div class="myweuiggtopimg">
		        			<img class="w100" src="../img/img (86).png">
		        		</div>
		        		<div class="flex1 ih25 padr10">
		        			<div class="fs1-2"><span class="colred">￥49.00</span><span class="right x">x</span></div>
		        			<div class="fs14">库存<span>700</span>件</div>
		        			<div class="fs14">请选择商品规格</div>
		        		</div>
		        	</div>
		           	<div class="myweuiggmain padlr10">
		           		<div class="myweuiggbox">
		           			<div class="myweuiggboxtop">尺码</div>
		           			<div class="myweuiggboxfoot">
		           				<div><input type="radio" name="001" /><span>L</span></div>
		           				<div><input type="radio" name="001" /><span>xxl</span></div>
		           				<div><input type="radio" name="001" /><span>啊哈哈哈</span></div>
		           				<div><input type="radio" name="001" /><span>无情刻进去额</span></div>
		           				<div><input type="radio" name="001" /><span>0025</span></div>
		           				<div><input type="radio" name="001" /><span>asdas</span></div>
		           				<div><input type="radio" name="001" /><span>奥斯卡到了那上课了</span></div>
		           			</div>
		           		</div>
		           		<div class="myweuiggbox">
		           			<div class="myweuiggboxtop">尺码</div>
		           			<div class="myweuiggboxfoot">
		           				<div><input type="radio" name="001" /><span>L</span></div>
		           				<div><input type="radio" name="001" /><span>xxl</span></div>
		           				<div><input type="radio" name="001" /><span>啊哈哈哈</span></div>
		           				<div><input type="radio" name="001" /><span>无情刻进去额</span></div>
		           				<div><input type="radio" name="001" /><span>0025</span></div>
		           				<div><input type="radio" name="001" /><span>asdas</span></div>
		           				<div><input type="radio" name="001" /><span>奥斯卡到了那上课了</span></div>
		           			</div>
		           		</div>
		           		<div class="myweuiggbox">
		           			<div class="myweuiggboxtop">尺码</div>
		           			<div class="myweuiggboxfoot">
		           				<div><input type="radio" name="001" /><span>L</span></div>
		           				<div><input type="radio" name="001" /><span>xxl</span></div>
		           				<div><input type="radio" name="001" /><span>啊哈哈哈</span></div>
		           				<div><input type="radio" name="001" /><span>无情刻进去额</span></div>
		           				<div><input type="radio" name="001" /><span>0025</span></div>
		           				<div><input type="radio" name="001" /><span>asdas</span></div>
		           				<div><input type="radio" name="001" /><span>奥斯卡到了那上课了</span></div>
		           			</div>
		           		</div>
		           		<div class="myweuiggbox">
		           			<div class="myweuiggboxtop">尺码</div>
		           			<div class="myweuiggboxfoot">
		           				<div><input type="radio" name="001" /><span>L</span></div>
		           				<div><input type="radio" name="001" /><span>xxl</span></div>
		           				<div><input type="radio" name="001" /><span>啊哈哈哈</span></div>
		           				<div><input type="radio" name="001" /><span>无情刻进去额</span></div>
		           				<div><input type="radio" name="001" /><span>0025</span></div>
		           				<div><input type="radio" name="001" /><span>asdas</span></div>
		           				<div><input type="radio" name="001" /><span>奥斯卡到了那上课了</span></div>
		           			</div>
		           		</div>
		           	</div>
		        </div>
		        <div class="weui-actionsheet__action">
		            <div class="weui-actionsheet__cell myweuiok" id="actionsheet_cancel">确认规格</div>
		        </div>
		    </div>
		</div>
		<!-- 商品优惠券详情 -->
		<div id="actionSheet_wrap2" style="display: none;">
		    <div class="weui-mask_transparent actionsheet__mask bg0-6"  style="opacity: 1" id="mask2"></div>
		    <div class="weui-actionsheet weui-actionsheet_toggle" id="weui-actionsheet2">
		        <div class="weui-actionsheet__menu myweuilq pad10">
		           <div class="myweuilqtop">
		           		<div class="myweuilqname fs14">巴黎贝甜(小白楼店)</div>
		           		<div><b class="colblack">领取优惠券</b></div>
		           </div>
		           <div class="myweuilqmain">
						<div class="flex lqbox lqbox1">
							<div class="flex1 flex lqleft textovh">
								<div class="flex flexcenter mgr5">
									￥ <span class="fs35">10</span>
								</div>
								<div class="flex1 textovh fs14">
									<div>优惠券</div>
									<div>实付满199可用</div>
									<div class="fs12 textovh">(<span>2017.08.09-2019.02.06</span><span>全场可用</span>)</div>
								</div>
							</div>
							<div class="lqright flex flexcenter">
								<span class="">点击领取</span>
							</div>
						</div>		   
						<div class="flex lqbox lqbox2">
							<div class="flex1 flex lqleft textovh">
								<div class="flex flexcenter mgr5">
									% <span class="fs35">90</span>
								</div>
								<div class="flex1 textovh fs14">
									<div>打折券</div>
									<div>实付满199可用</div>
									<div class="fs12 textovh">(<span>2017.08.09-2019.02.06</span><span>全场可用</span>)</div>
								</div>
							</div>
							<div class="lqright flex flexcenter">
								<span class="">点击领取</span>
							</div>
						</div>		   
						<div class="flex lqbox lqbox3">
							<div class="flex1 flex lqleft textovh">
								<div class="flex flexcenter mgr5">
									￥ <span class="fs35">10</span>
								</div>
								<div class="flex1 textovh fs14">
									<div>现金券</div>
									<div>实付满199可用</div>
									<div class="fs12 textovh">(<span>2017.08.09-2019.02.06</span><span>全场可用</span>)</div>
								</div>
							</div>
							<div class="lqright flex flexcenter">
								<span class="">点击领取</span>
							</div>
						</div>		           	
		           </div>

		        </div>
		        <div class="weui-actionsheet__action">
		            <div class="weui-actionsheet__cell myweuiok2" id="actionsheet_cancel2">关闭</div>
		        </div>
		    </div>
		</div>
    </div>

    
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/xq_slide.js"></script>
<script type="text/javascript">
	var shops=[{pic:'../img/01.png'},{pic:'../img/01.png'}];

				var str ="";
                for(var index in shops){
                	var shop = shops[index];
                	var url = shop.url ? 'href="'+shop.url+'"' : '';
                    var url = shop.url ? 'href="'+shop.url+'"' : '';
                    str += '<li>'
								+'<a '+url+'><img src="'+shop.pic+'"/></a>'
							+'</li>';
                }
                $(".xq_slide_out").html('<ul class="xq_slide_in"></ul>');
                $('.xq_slide_in').html(str);
                $(".xq_slide_out").xq_slide({
					type: "h", //轮播方式  h水平轮播；v垂直轮播；o透明切换
					vatical: false, //图片描述性文本 true 显示 false不显示
					choseBtn: false, //是否显示上下切换按钮
					speed: 2000, //动画间隔的时间，以毫秒为单位。
					mousestop: true, //当鼠标移上去是否停止循环,针对PC端
					showbar: true, //是否显示轮播导航bar
					openmb: true //是否开启移动端支持
				});

//显示领券
$('.shoplqbox').click(function () {
	console.log(123);
	$('#actionSheet_wrap2').css('display','block');
});
$('#mask2,#actionsheet_cancel2').click(function(){
	$('#actionSheet_wrap2').hide();
})

//显示规格
$('.ggbox').click(function () {
	console.log(123);
	$('#actionSheet_wrap').css('display','block');
});
$('#mask,#actionsheet_cancel,.x').click(function(){
	$('#actionSheet_wrap').hide();
})

//点击收藏
$('.scbut').click(function(){
	if($(this).hasClass('on')){
		$(this).find('img').attr('src','../img/img (151).png');
		$(this).find('.scbuttext').html('+收藏').removeClass('colb6').addClass('colred');
		$(this).removeClass('on');
	}else{
		$(this).find('img').attr('src','../img/img (140).png');
		$(this).find('.scbuttext').html('已收藏').removeClass('colred').addClass('colb6');
		$(this).addClass('on');
	}	
})

// 点击规格
$('.myweuiggboxfoot>div').click(function(){
	if($(this).hasClass('on')){
		$(this).removeClass
	}
})
</script>
</body>
</html>